<!DOCTYPE html>
<html ng-app="myApp">

<head lang="en">
    <meta charset="utf-8">
    <title>Teams List App</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"></script>
    <script src="services.js"></script>
    <script src="app.js"></script>
</head>

<body>
<div class="row-fluid">
    <div class="span3" ng-controller="FilterCtrl">
        <form class="form-horizontal">

            <div class="controls-row">
                <label for="searchTextBox" class="control-label">Search:</label>

                <div class="controls">
                    <input type="text" id="searchTextBox" ng-model="filterService.searchText">
                </div>
            </div>

            <div class="controls-row">
                <label for="sportComboBox" class="control-label">Sport:</label>

                <div class="controls">
                    <select id="sportComboBox" ng-model="filterService.activeFilters.sport">
                        <option ng-repeat="sport in ['Basketball', 'Hockey', 'Football']">{{sport}}</option>
                    </select>
                </div>
            </div>

            <div class="controls-row">
                <label for="cityComboBox" class="control-label">City:</label>

                <div class="controls">
                    <select id="cityComboBox" ng-model="filterService.activeFilters.city">
                        <option ng-repeat="city in ['Dallas', 'Los Angeles', 'Boston', 'New York']">{{city}}</option>
                    </select>
                </div>
            </div>

            <div class="controls-row">
                <label class="control-label">Featured:</label>

                <div class="controls">
                    <input type="checkbox" ng-model="filterService.activeFilters.featured" ng-false-value=""/>
                </div>
            </div>
        </form>
    </div>
    <div class="offset1 span8" ng-controller="ListCtrl">
        <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Sport</th>
                <th>City</th>
                <th>Featured</th>
            </tr>
            </thead>
            <tbody id="teamListTable">
            <tr ng-repeat="team in teamsList | filter:filterService.activeFilters | filter:filterService.searchText">
                <td>{{team.name}}</td>
                <td>{{team.sport}}</td>
                <td>{{team.city}}</td>
                <td>{{team.featured}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
